<template>
  <v-app id="inspire">
    <v-content>
      <v-container >
        <h1 style="text-align: center">Select a Meeting</h1>
        <v-autocomplete
          v-model="selectList"
          :items="myFinishedConferences"
          filled
          chips
          color="blue-grey lighten-2"
          label="Select"
          item-text="fullname"
          item-value="fullname"
        >
          <template v-slot:selection="data">
            <v-chip
              v-bind="data.attrs"
              :input-value="data.selected"
              @click="data.select"
            >
              {{ data.item.fullName }}
            </v-chip>
          </template>
          <template v-slot:item="data">
            <template >
              <v-list-item-content>
                <v-list-item-title v-html="data.item.fullName" :disabled="data.item.statusMessage !== 'Showing Results'"></v-list-item-title>
                <v-list-item-subtitle v-html="data.item.abbrName"></v-list-item-subtitle>
                <v-list-item-subtitle v-html="data.item.statusMessage"></v-list-item-subtitle>
              </v-list-item-content>
            </template>
          </template>
        </v-autocomplete>
        <v-row>
          <v-col
            cols="12"
            md="6"
          >
            <v-text-field
              v-model="DiscussionTitle"
              label="Discussion Title"
              required
            ></v-text-field>
          </v-col>
        </v-row>
        <v-btn type="primary" @click="doSubmit">Submit</v-btn>
        <side-bar></side-bar>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  import SideBar from './Components/SideBar'
  import store from '../store'
  export default {
    name: 'create-question',
    components: {SideBar},
    data () {
      const generateMyEndedConference = _ => {
        const conferences = []
        this.$axios.post('/meetingIApplied', store.state.userName)
          .then(resp => {
            console.log(resp)
            console.log(resp.data)
            var response = resp.data
            response.forEach((meeting, index) => {
              conferences.push({
                identity: 'Chair',
                chair: meeting.chair,
                pcMemberNames: meeting.pcMembers,
                abbrName: meeting.abbrName,
                fullName: meeting.fullName,
                topics: meeting.topics,
                date: meeting.date,
                spot: meeting.spot,
                submitDueDate: meeting.submitDueDate,
                resultReleaseDate: meeting.resultReleaseDate,
                statusMessage: meeting.status === 0 ? 'To Be Approved'
                  : (meeting.status === 1 ? 'Already Approved'
                    : (meeting.status === 2 ? 'Allow Contribution'
                      : (meeting.status === 3 ? 'Reviewing'
                        : (meeting.status === 4 ? 'Showing Results'
                          : (meeting.status === 5 ? 'Closed' : 'Rejected'))))),
                router: meeting.status === -1 ? '' : 'invite/' + meeting.fullName
              })
            })
          })
        this.$axios.post('/meetingIJoined', store.state.userName)
          .then(resp => {
            var response = resp.data
            response.forEach((meeting, index) => {
              conferences.push({
                identity: 'Chair',
                chair: meeting.chair,
                pcMemberNames: meeting.pcMembers,
                abbrName: meeting.abbrName,
                fullName: meeting.fullName,
                topics: meeting.topics,
                date: meeting.date,
                spot: meeting.spot,
                submitDueDate: meeting.submitDueDate,
                resultReleaseDate: meeting.resultReleaseDate,
                statusMessage: meeting.status === 0 ? 'To Be Approved'
                  : (meeting.status === 1 ? 'Already Approved'
                    : (meeting.status === 2 ? 'Allow Contribution'
                      : (meeting.status === 3 ? 'Reviewing'
                        : (meeting.status === 4 ? 'Showing Results'
                          : (meeting.status === 5 ? 'Closed' : 'Rejected'))))),
                router: ''
              })
            })
          })
        return conferences
      }
      return {
        selectList:[],
        myFinishedConferences : generateMyEndedConference(),
        DiscussionTitle : '',
        dataForm: {
          title: ''
        },
        dataRules: {
          title: [
            { required: true, message: 'must input' },
            { max: 100, message: 'input less than 100 words' }
          ]
        }
      }
    },
    watch: {
    },
    computed: {
    },
    methods: {
      doSubmit () {
        //selectList.fullName
        this.$axios.post('/openFirstPost', {
          title: this.DiscussionTitle,
          meetingFullName: this.selectList.fullName,
          type: 1,
          status: 1,
        })
          .then(resp => {
            if (resp.status === 200) {
              if (resp.data === true) {
                this.text = 'openFirstPost成功'
                this.snackbar = true
                location.reload()
              } else {
                this.text = 'openFirstPost失败'
                this.snackbar = true
              }
            } else {
              this.text = 'close error'
              this.snackbar = true
            }
          })
          .catch(error => {
            this.text = 'error!'
            this.snackbar = true
          })
      }
    }
  }
</script>
